<template>
	<view class="wallet-container">
		<!-- 导航栏 -->
		<nav-bar></nav-bar>
		<!-- 钱包卡片 -->
		<view class="wallet-card order-wallet">
			<view class="card-title">我的钱包</view>
			<view class="amount-section">
				<view class="amount-label">可提现金额(元)</view>
				<view class="amount-value">{{ orderWallet.balance || '0.00' }}</view>
			</view>
			<view class="card-footer">
				<view class="footer-item" @tap="goToAccountFlow">
					<text>账户流水</text>
				</view>
				<view class="divider"></view>
				<view class="footer-item" @tap="goToWithdrawRecord">
					<text>提现记录</text>
				</view>
			</view>
			<view class="top-btns">
				<button class="withdraw-btn" @tap="handleWithdraw">提现</button>
				<button class="account-btn" @tap="goToWithdrawAccount">
					<text class="iconfont icon-wallet"></text>
					<text>提现账户</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import TechNavBar from '@/components/tech-nav-bar.vue'
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components: {
			TechNavBar,
			NavBar
		},
		data() {
			return {
				orderWallet: {
					balance: '0.00', // 可用余额
					frozenAmount: '0.00', // 冻结金额
					totalIncome: '0.00', // 累计收入
					totalWithdraw: '0.00' // 累计提现
				},
			}
		},
		methods: {
			// 跳转到提现账户页面
			goToWithdrawAccount() {
				uni.navigateTo({
					url: '/pages/technician/withdraw-account'
				})
			},
			// 跳转到账户流水页面
			goToAccountFlow() {
				uni.navigateTo({
					url: '/pages/technician/account-flow'
				})
			},
			// 跳转到提现记录页面
			goToWithdrawRecord() {
				uni.navigateTo({
					url: '/pages/technician/withdraw-record'
				})
			},
			// 处理提现操作
			handleWithdraw() {
				// if (type === 'order' && !this.orderWallet.availableAmount) {
				//   uni.showToast({
				//     title: '暂无可提现金额',
				//     icon: 'none'
				//   })
				//   return
				// }
				uni.navigateTo({
					url: `/pages/technician/withdraw`
				})
			},
			// 加载钱包数据
			async loadWalletData() {
				try {
					// 从本地存储获取技师ID和token
					const userInfo = uni.getStorageSync('userInfo');
					const token = uni.getStorageSync('token');
					const techId = userInfo ? userInfo.techId : null;

					if (!techId || !token) {
						uni.showToast({
							title: '登录信息已失效，请重新登录',
							icon: 'none'
						});
						// 可以在这里添加重定向到登录页面的逻辑
						return;
					}

					// 构建请求参数
					const params = {
						technicianId: techId
					};

					// 调用后端API获取钱包数据
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/techWallet/techWallet/listAll`,
						method: 'GET',
						data: params,
						header: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer ' + token
						}
					});

					if (result.data.code === 200) {
						// 获取钱包列表
						const walletList = result.data.rows || [];

						// 获取订单钱包数据
						if (walletList.length > 0) {
							const orderWalletData = walletList[0]; // 假设第一个是订单钱包

							// 更新钱包数据，保留两位小数
							this.orderWallet = {
								balance: this.formatAmount(orderWalletData.balance),
								frozenAmount: this.formatAmount(orderWalletData.frozenAmount),
								totalIncome: this.formatAmount(orderWalletData.totalIncome),
								totalWithdraw: this.formatAmount(orderWalletData.totalWithdraw)
							};
						}
					} else {
						throw new Error(result.data.msg || '获取钱包信息失败');
					}
				} catch (err) {
					console.error('获取钱包信息失败:', err);
					uni.showToast({
						title: '获取钱包信息失败',
						icon: 'none'
					});

					// 如果是token相关错误，可以跳转到登录页面
					if (err.message && err.message.includes('JWT')) {
						setTimeout(() => {
							// 跳转到登录页面的逻辑
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				}
			},

			// 格式化金额，保留两位小数
			formatAmount(amount) {
				return parseFloat(amount || 0).toFixed(2);
			}
		},
		onLoad() {
			this.loadWalletData()
		},

		// 页面显示时刷新数据
		onShow() {
			this.loadWalletData()
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-container {
		min-height: 100vh;
		background: #F5F5F5;
		padding: 0 30rpx 40rpx;
	}

	.withdraw-account {
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;

		.iconfont {
			margin-right: 8rpx;
			font-size: 36rpx;
		}
	}

	.wallet-card {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);

		&.order-wallet {
			background: linear-gradient(135deg, #2B87FF 0%, #1A76EE 100%);
		}

		&.merchant-card {
			background: linear-gradient(135deg, #9B6CFF 0%, #8B5CFF 100%);
		}

		.card-title {
			font-size: 36rpx;
			color: #FFFFFF;
			margin-bottom: 50rpx;
			font-weight: 500;
		}

		.amount-section {
			margin-bottom: 80rpx;

			.amount-label {
				font-size: 32rpx;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 20rpx;
			}

			.amount-value {
				font-size: 72rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}

		.card-footer {
			display: flex;
			align-items: center;
			border-top: 2rpx solid rgba(255, 255, 255, 0.2);
			padding-top: 40rpx;

			.footer-item {
				flex: 1;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				padding: 10rpx 0;
				position: relative;
				overflow: hidden;

				&:active {
					opacity: 0.8;
				}

				&::after {
					content: '';
					position: absolute;
					bottom: -2rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 2rpx;
					background: #FFFFFF;
					transition: width 0.3s ease;
				}

				&:active::after {
					width: 60%;
				}
			}

			.divider {
				width: 2rpx;
				height: 32rpx;
				background: rgba(255, 255, 255, 0.3);
			}
		}

		.top-btns {
			position: absolute;
			right: 40rpx;
			top: 40rpx;
			display: flex;
			align-items: center;

			.withdraw-btn {
				background: #FFFFFF;
				color: #2B87FF;
				font-size: 32rpx;
				padding: 12rpx 40rpx;
				border-radius: 40rpx;
				border: none;
				margin-right: 24rpx;
				box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:disabled {
					background: rgba(255, 255, 255, 0.5);
					color: rgba(43, 135, 255, 0.5);
				}

				&::after {
					border: none;
				}

				&:active {
					transform: scale(0.95);
					box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
				}
			}

			.account-btn {
				display: flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.2);
				color: #FFFFFF;
				font-size: 32rpx;
				padding: 12rpx 24rpx;
				border-radius: 40rpx;
				border: none;
				backdrop-filter: blur(4px);
				transition: all 0.3s ease;

				.iconfont {
					font-size: 32rpx;
					margin-right: 8rpx;
				}

				&::after {
					border: none;
				}

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 0.3);
				}
			}
		}

		&.merchant-card .withdraw-btn {
			color: #9B6CFF;

			&:disabled {
				color: rgba(155, 108, 255, 0.5);
			}
		}
	}
</style>